
/*CSS动画*/

/*消息气泡*/
.right_tip{
    display: block;
    width: 70px;
    height: 80px;
    float: left;
    margin-left: 10px;
    position: relative;
}
.tip_icon_win{
	width: 100%;
	height: 100%;
}
.tip_icon_win:hover .tip_icon{
	background: url(popup/page_head_ico.png) 0 -39px no-repeat;
}
.tip_balloons{
	float: left;
	width: 18px;
	height: 18px;
	background: url(popup/tip_balloons.png) no-repeat center center;
	font-size: 12px;
	text-align: center;
	line-height: 18px;
	color: white;
	margin-top: 20px;
}
.tip_icon{
	display: block;
    width: 17px;
    height: 19px;
    margin: auto;
    margin-top: 20px;
   	background: url(popup/page_head_ico.png) 0 -60px no-repeat;
	transform-origin: 50% 0;
	margin-left: 15px;
	margin-right: 5px;
	margin-top: 30px;
	float: left;
}


.tip_toggle_content{
	width: 200px;
	height: auto;
	position: absolute;
	top:80px;
	right: 0;
	box-sizing: border-box;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 0 5px 2px rgba(0,0,0,.1);
	display: none;
	border: 1px solid #D8E3EF\9;
	background: white;
	z-index: 99;
}


.tip_toggle_content li{
	width: 100%;
	background: white;
	box-sizing: border-box;
}
.tip_details_win{
	max-height: 160px;
	overflow: hidden;
}
.tip_details{
	width: 100%;
	height: 40px;
	margin: auto;
	border-bottom: 1px solid #eee;
	box-sizing: border-box;
}
.tip_toggle_content li .tip_details:hover{
	background: #ebf5ff;
}
.tip_toggle_content .tip_title{
	background: #ebf5ff;
	border-bottom: 1px solid #eee;
}

.tip_toggle_content li .tip_img{
	width: 20px;
	height: 20px;
	float: left;
	background: url(popup/tip_img.png) no-repeat center center;
	margin: 9px 10px 0 10px;
}
.tip_toggle_content li .tip_news{
	margin-top: 9px;
	background: #6bc1f2 url(popup/tip_news.png) no-repeat center center;
}
.tip_toggle_content li .tip_num,
.tip_toggle_content li .tip_txt{
	font-size: 14px;
	color: #657180;
	float: left;
	line-height: 40px;
}
.tip_toggle_content li .tip_close{
	float: right;
	width: 15px;
	height: 15px;
	margin: 10px;
	background: url(popup/tip_close.png) no-repeat center center;
}
.tip_toggle_content li .tip_close:hover{
	background: url(popup/tip_close_hover.png) no-repeat center center;
}

.tip_toggle_content li .tip_txt{
	font-size: 12px;
}

.tip_toggle_content li .content_tip_balloons{
	width: 18px;
	height: 18px;
	background: url(popup/tip_balloons.png) no-repeat center center;
	font-size: 12px;
	text-align: center;
	line-height: 18px;
	color: white;
	margin-top: 10px;
	float: right;
}
.tip_toggle_content li .tip_txt_more{
	display: block;
	text-align: center;
	line-height: 40px;
	color: #657180;
	font-size: 12px;
	display: block;
	width: 90%;
	height: 40px;
	margin: auto;
}
/*全部信息*/
.tip_allcontent_win{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 100px;
	right: 0px;
	overflow: hidden;
	display: none;
	filter:alpha(opacity=20);
	background-color: black;
	opacity: 0.2;
}
.tip_allcontent{
	width: 400px;
	height: 100%;
	position: absolute;
	right: -400px;
	top: 100px;
	background: #FFFFFF;
	overflow: hidden;
	border-left: 1px solid #EEEEEE\9;
	display: none;
}
.tip_allcontent .all_title{
	background: #6bc1f2;
	height: 54px;
	box-sizing: border-box;
}
.tip_allcontent .all_title span{
	display: block;
	padding-left: 30px;
	color: white;
	font-size: 16px;
	text-align: right;
	background: url(popup/page_head_ico.png) no-repeat 5px 7px;
	float: left;
	margin: 15px;
}
.tip_allcontent .all_title .all_close{
	display: block;
	width: 16px;
	height: 24px;
	float: right;
	background: url(popup/page_head_ico.png) no-repeat 0px -16px;
	cursor: pointer;
	margin: 15px;
}
.tip_allcontent .all_content{
	width: 100%;
}
.tip_allcontent .all_content ul{
	width: 100%;
	padding: 0 15px;
}
.tip_allcontent .all_content ul li{
	border-bottom: 1px solid #dfdfdf;
}
.tip_allcontent .all_content ul li a{
	display: block;
	width: 100%;
	height: 40px;
	line-height: 40px;
	color: #5f6b7e;
	font-size: 14px;
	font-weight: 400px;
	padding: 0px 5px;
	height: in;	
}
.tip_allcontent .all_content ul li .li_content{
	display: none;
}







/*小铃铛摇摆*/
.rock{
	animation: ringing 2.0s infinite ease 1.0s;
	-webkit-animation: ringing 2.0s infinite ease 1.0s;
}
@keyframes ringing{
	0% {
    	transform: rotate(-15deg);
    	-webkit-transform: rotate(-15deg);
	}
	2% {
	    transform: rotate(15deg);
	    -webkit-transform: rotate(15deg);
	}
	4% {
	    transform: rotate(15deg);
	    -webkit-transform: rotate(15deg);
	}
	6% {
	    transform: rotate(18deg);
	    -webkit-transform: rotate(18deg);
	}
	8% {
	    transform: rotate(-22deg);
	    -webkit-transform: rotate(-22deg);
	}
	10% {
	    transform: rotate(22deg);
	    -webkit-transform: rotate(22deg);
	}
	12% {
	    transform: rotate(-18deg);
	    -webkit-transform: rotate(-18deg);
	}
	14% {
	    transform: rotate(18deg);
	    -webkit-transform: rotate(18deg);
	}
	16% {
	    transform: rotate(-12deg);
	    -webkit-transform: rotate(-12deg);
	}
	18% {
	    transform: rotate(12deg);
	    -webkit-transform: rotate(12deg);
	}
	20% {
	    transform: rotate(0deg);
	    -webkit-transform: rotate(0deg);
	}
}
@-webkit-keyframes ringing{
	0% {
    	transform: rotate(-15deg);
    	-webkit-transform: rotate(-15deg);
	}
	2% {
	    transform: rotate(15deg);
	    -webkit-transform: rotate(15deg);
	}
	4% {
	    transform: rotate(15deg);
	    -webkit-transform: rotate(15deg);
	}
	6% {
	    transform: rotate(18deg);
	    -webkit-transform: rotate(18deg);
	}
	8% {
	    transform: rotate(-22deg);
	    -webkit-transform: rotate(-22deg);
	}
	10% {
	    transform: rotate(22deg);
	    -webkit-transform: rotate(22deg);
	}
	12% {
	    transform: rotate(-18deg);
	    -webkit-transform: rotate(-18deg);
	}
	14% {
	    transform: rotate(18deg);
	    -webkit-transform: rotate(18deg);
	}
	16% {
	    transform: rotate(-12deg);
	    -webkit-transform: rotate(-12deg);
	}
	18% {
	    transform: rotate(12deg);
	    -webkit-transform: rotate(12deg);
	}
	20% {
	    transform: rotate(0deg);
	    -webkit-transform: rotate(0deg);
	}
}
/*已读消息消失*/
.zoomOutDown {
	-webkit-animation-name: zoomOutDown;
	animation-name: zoomOutDown;
	-webkit-animation-duration: .75s;
	animation-duration: .75s;
}
@-webkit-keyframes zoomOutDown {
	40% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
		animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
		transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
		-webkit-transform-origin: center bottom;
		transform-origin: center bottom;
		-webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
		animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
	}
}

@keyframes zoomOutDown {
	40% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		-ms-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
		animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
	}
	100% {
		
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
		-ms-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
		transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
		-webkit-transform-origin: center bottom;
		-ms-transform-origin: center bottom;
		transform-origin: center bottom;
		-webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
		animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
		opacity: 0;
	}
}

